<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-11-05 23:12:30
 * @LastEditors: dllyhj 16376097+dllyhj@user.noreply.gitee.com
 * @LastEditTime: 2025-11-07 16:49:14
 * @FilePath: \server_monitor\src\pages\welcome\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="home-wrap">
    <div class="header-wrap" >
      <div class="server-image">
        <p style="color: #fff;">
          <!-- <span>{{ serverData.DeviceInfo.ProductName }}</span> -->
        </p>
        <img src="@/assets/home/img/img_02.png" width="430" />
      </div>
      <div class="server-info-wrap">
        <div class="deviceInformation-wrap">

          <div class="infoTitle">
            <p>设备信息</p>
            <!-- <span style="color: #409EFF;cursor: pointer;">更多详情></span> -->
          </div>
          <div class="deviceContent-wrap">
            <ul class="deviceContent">
              <li>
                <span class="label">产品序列号</span>
                <span class="value">{{ serverData.DeviceInfo.FQDN }}</span>
              </li>
              <li>
                <span class="label">iBMC固件版本</span>
                <span class="value">{{ serverData.DeviceInfo.BMCVersion }}</span>
              </li>
              <li>
                <span class="label">MAC地址</span>
                <span class="value">{{ serverData.DeviceInfo.MAC }}</span>
              </li>
            </ul>
            <ul class="deviceContent">
              <li>
                <span class="label">主机名</span>
                <span class="value">{{ serverData.DeviceInfo.ProductSN }}</span>
              </li>
              <li>
                <span class="label">BIOS固件版本</span>
                <span class="value">{{ serverData.DeviceInfo.BIOSVersion }}</span>
              </li>
              <li>
                <span class="label">全局唯一标识符</span>
                <span class="value">{{ serverData.DeviceInfo.GUID }}</span>
              </li>
            </ul>
          </div>

        </div>
        <div class="sysmonitor-wrap">
          <div class="infoTitle">
            <p>系统监控</p>
            <span>
              <span>最近刷新时间：</span>
              <span>2025-11-07 02:03:38</span>
              <el-icon style="cursor: pointer;margin-left: 4px;"><RefreshRight /></el-icon>
            </span>
          </div>

          <div class="monitor-chart">
            <!-- 图表容器：设置宽度和高度 -->
            <!-- 磁盘占用率 -->
            <!-- <div ref="chartDiskRef" style="width: 150px; height: 150px;"></div> -->

            <!-- CPU占用率 -->
            <!-- <div ref="chartCPURef" style="width: 150px; height: 150px;"></div> -->

            <!-- 内存占用率 -->
            <!-- <div ref="chartMemoryRef" style="width: 150px; height: 150px;"></div> -->

            <!-- 进风口温度 -->
            <!-- <div ref="chartFunRef" style="width: 150px; height: 150px;"></div> -->

            <div class="diskPan">
              <div>
                <span style="font-size: 18px;">{{ serverData.Summary.Storage.DiskThresholdPercent }}</span>
                <span>%</span>
              </div>
              <div>磁盘</div>
              <div>占用率</div>
            </div>
            <div class="diskPan">
              <div>
                <span style="font-size: 18px;">0</span>
                <span>%</span>
              </div>
              <div>CPU</div>
              <div>占用率</div>
            </div>
            <div class="diskPan">
              <div>
                <span style="font-size: 18px;">0</span>
                <span>%</span>
              </div>
              <div>内存</div>
              <div>占用率</div>
            </div>
            <div class="diskPan">
              <div>
                <span style="font-size: 18px;">21</span>
                <span>℃</span>
              </div>
              <div>进风口</div>
              <div>温度</div>
            </div>
            <div class="diskPan">
              <div>
                <span style="font-size: 18px;">444</span>
                <span>W</span>
              </div>
              <div>功率</div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="home-card-wrap">

      <el-card>
        <template #header>
          <div class="card-header">
            <span>资源</span>
          </div>
        </template>
        <div class="resource-list-wrap">
          <div class="resource-list-item">
            <div class="name">处理器</div>
            <div class="count-wrap">
              <img src="@/assets/home/img/CPU.png" width="60px" height="60px" />
              <ul class="countInfo">
                <li>总数&nbsp;<span>{{ serverData.Summary.Processor.MaxNum }}</span></li>
                <li>在位&nbsp;<span>{{ serverData.Summary.Processor.CurrentNum }}</span></li>
              </ul>
            </div>
          </div>
          <div class="resource-list-item">
            <div class="name">内存</div>
            <div class="count-wrap">
              <img src="@/assets/home/img/RAM.png" width="60px" height="60px" />
              <ul class="countInfo">
                <li>总数&nbsp;<span>{{ serverData.Summary.Memory.MaxNum }}</span></li>
                <li>在位&nbsp;<span>{{ serverData.Summary.Memory.CurrentNum }}</span></li>
                <li>容量&nbsp;<span>{{ serverData.Summary.Memory.CapacityGiB}}GB</span></li>
              </ul>
            </div>
          </div>
          <div class="resource-list-item">
            <div class="name">存储</div>
            <div class="count-wrap">
              <img src="@/assets/home/img/memory.png" width="60px" height="60px" />
              <ul class="countInfo">
                <li>RAID卡&nbsp;<span>{{ serverData.Summary.Storage.RaidControllerNum }}</span></li>
                <li>逻辑盘&nbsp;<span>{{ serverData.Summary.Storage.LogicalDriveNum }}</span></li>
                <li>物理盘&nbsp;<span>{{ serverData.Summary.Storage.PhysicalDriveNum }}</span></li>
              </ul>
            </div>
          </div>
          <div class="resource-list-item">
            <div class="name">电源</div>
            <div class="count-wrap">
              <img src="@/assets/home/img/power.png" width="60px" height="60px" />
              <ul class="countInfo">
                <li>总数&nbsp;<span>{{ serverData.Summary.Power.MaxNum }}</span></li>
                <li>在位&nbsp;<span>{{ serverData.Summary.Power.CurrentNum }}</span></li>
              </ul>
            </div>
          </div>
          <div class="resource-list-item">
            <div class="name">风扇</div>
            <div class="count-wrap">
              <img src="@/assets/home/img/fun.png" width="60px" height="60px" />
              <ul class="countInfo">
                <li>总数&nbsp;<span>{{ serverData.Summary.Fan.MaxNum }}</span></li>
                <li>在位&nbsp;<span>{{ serverData.Summary.Fan.CurrentNum }}</span></li>
              </ul>
            </div>
          </div>
          <div class="resource-list-item">
            <div class="name">网络适配器</div>
            <div class="count-wrap">
              <img src="@/assets/home/img/networkCard.png" width="60px" height="60px" />
              <ul class="countInfo">
                <li>总数&nbsp;<span>{{ serverData.Summary.Netadapter.MaxNum }}</span></li>
                <li>在位&nbsp;<span>{{ serverData.Summary.Netadapter.CurrentNum }}</span></li>
              </ul>
            </div>
          </div>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script setup lang="ts">
import * as validateRules from '@/common/utils/validate';
import { VxeColumn, VxeTable } from 'vxe-table';
import { ANY_OBJECT } from '@/types/generic';
import { DictData, DictionaryBase } from '@/common/staticDict/types';
import { ElMessage, ElMessageBox, UploadFile } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { useCommon } from '@/common/hooks/useCommon';
import { useLayoutStore, useStaticDictStore } from '@/store';
import { useDownload } from '@/common/hooks/useDownload';
import { useDropdown } from '@/common/hooks/useDropdown';
import { DropdownOptions, ListData } from '@/common/types/list';
import { useTable } from '@/common/hooks/useTable';
import { TableOptions } from '@/common/types/pagination';
import { useUpload } from '@/common/hooks/useUpload';
import { useUploadWidget } from '@/common/hooks/useUploadWidget';
import { DictionaryController } from '@/api/system';
import {
  treeDataTranslate,
  findItemFromList,
  findTreeNodePath,
  findTreeNode,
  stringCase,
  getToken,
} from '@/common/utils';
import { FxProjectData } from '@/api/generated/fxProjectController';
import { HorizontalSupervisionData } from '@/api/generated/horizontalSupervisionController';
import { FxRollCallData } from '@/api/generated/fxRollCallController';
import {
  FxProjectController,
  HorizontalSupervisionController,
  FxRollCallController,
} from '@/api/generated';
import { homeEntityController } from "@/api/home/index"

// 引入 echarts 库
import * as echarts from 'echarts'
import { width } from 'dom7';



const router = useRouter();
const route = useRoute();
const layoutStore = useLayoutStore();

const chartDiskRef = ref(null);
const chartCPURef = ref(null);
const chartMemoryRef = ref(null);
const chartFunRef = ref(null);

// 存储 ECharts 实例（磁盘占用率）
let chartInstance_disk: any  = null;
let chartInstance_cpu: any  = null;
let chartInstance_memory: any  = null;
let chartInstance_fun: any  = null;

/**
 * 初始化磁盘占用率
 */
const initDiskChart = () => {
  if(chartDiskRef.value) {
    // 初始化 echarts 实例
    chartInstance_disk = echarts.init(chartDiskRef.value)
  }

  // 配置项
  let option = {
            // 标题（可根据需要调整或删除）
            // title: { text: '磁盘占用率' },
            series: [{
                type: 'pie', // 饼图类型
                radius: ['60%', '80%'], // 环形的内外半径，实现环形效果
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    formatter: function(params) {
                        // 自定义文字内容：百分比 + 说明
                        if (params.name === '进度') {
                            return params.value + '%\n磁盘\n占用率';
                        }
                        return '';
                    },
                    // 文字样式
                    fontSize: 16,
                    fontWeight: 'bold',
                    align: 'center',
                    verticalAlign: 'middle',
                    lineHeight: 20
                },
                labelLine: { show: false }, // 隐藏引导线
                data: [
                    { name: '进度', value: 0, itemStyle: { color: 'red' } }, // 白色进度块（可自定义颜色）
                    { name: '背景', value: 100, itemStyle: { color: '#333' } } // 深色背景块（模拟环形背景）
                ]
            }]
  };

  chartInstance_disk.setOption(option);
}

const initFunChart = () => {
  if(chartFunRef.value) {
    // 初始化 echarts 实例
    chartInstance_fun = echarts.init(chartFunRef.value)
  }
  let option = {
    series: [
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        splitNumber: 12,
        itemStyle: {
          color: '#FFAB91'
        },
        progress: {
          show: true,
          width: 30
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 30
          }
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        splitLine: {
          distance: -52,
          length: 14,
          lineStyle: {
            width: 3,
            color: '#999'
          }
        },
        axisLabel: {
          distance: -20,
          color: '#999',
          fontSize: 20
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          width: '60%',
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, '-15%'],
          fontSize: 60,
          fontWeight: 'bolder',
          formatter: '{value} °C',
          color: '#fff'
        },
        data: [
          {
            value: 20
          }
        ]
      },
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        itemStyle: {
          color: '#FD7347'
        },
        progress: {
          show: true,
          width: 8
        },
        pointer: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 14,
            name: "进风口温度",
          }
        ]
      }
    ]
  };
  setInterval(function () {
    const random = +(Math.random() * 60).toFixed(2);
    chartInstance_fun.setOption({
      series: [
        {
          data: [
            {
              value: random
            }
          ]
        },
        {
          data: [
            {
              value: random
            }
          ]
        }
      ]
    });
  }, 2000);
  chartInstance_fun.setOption(option);
}

const initChart = () => {

  initDiskChart()

}

let serverData = reactive(
  {
    "Summary": {
        "Power": {
            "PowerConsumedWatts": 456,
            "UpperPowerThresholdWatts": 3000,
            "MaxNum": 2,
            "CurrentNum": 2,
            "PowerCapacityWatts": 3000
        },
        "Processor": {
            "ThresholdPercent": 100,
            "MaxNum": 2,
            "CurrentNum": 2,
            "UseagePercent": 0
        },
        "Fan": {
            "CurrentNum": 4,
            "MaxNum": 4
        },
        "Thermal": {
            "InletTemperature": 21,
            "InletTempMajorAlarmThreshold": 48,
            "InletTempMinorAlarmThreshold": 46
        },
        "Netadapter": {
            "CurrentNum": 3,
            "MaxNum": 3
        },
        "Memory": {
            "CapacityGiB": 512,
            "ThresholdPercent": 100,
            "MaxNum": 32,
            "CurrentNum": 8,
            "UseagePercent": 0
        },
        "Storage": {
            "RaidControllerNum": 1,
            "LogicalDriveNum": 2,
            "PhysicalDriveNum": 38,
            "DiskUsagePercent": null,
            "DiskThresholdPercent": 100
        }
    },
    "KVMClientUrl": "http:\/\/support.xfusion.com\/onlinetoolsweb\/itexpress\/kvmclient\/",
    "ProductImage": "img_02",
    "DeviceInfo": {
        "ProductAlias": "",
        "FQDN": "2106183903XHR2000039",
        "BMCVersion": "3.07.03.53",
        "CertifiedServerName": null,
        "GUID": "79F6609D-3473-906C-EF11-0BEF16189564",
        "MAC": "34:73:79:f6:60:9d",
        "DefaultIPAddress": {
            "Mode": "DHCP",
            "Address": null
        },
        "ProductSN": "2106183903XHR2000039",
        "ProductName": "5288 V6",
        "DeviceIPv4": "192.168.8.7",
        "BIOSVersion": "1.81",
        "DeviceIPv6": ""
    }
  }
);

const getHomeData = () => {
  // console.log(,'list')
  homeEntityController.list({})
    .then(res => {
      console.log(res, 'ree');
      if(res.success){
        let resData:any = res.data || {};
        serverData = JSON.parse(resData);
        ElMessage({
          message: '数据获取成功',
          type: 'success',
        })
      }else{
        ElMessage({
          message: '数据获取异常',
          type: 'success',
        })
      }
    })
}



onMounted(() => {
  // initChart()
  getHomeData()
})

</script>

<style lang="scss">
.home-wrap{
  .header-wrap{
    background-color: black;
    height: 360px;
    display: flex;

    .server-image{
      padding-right: 40px;
    }

    .server-info-wrap{
      flex: 1;
      color: #fff;

      .infoTitle{
        width: 700px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 14px;
      }

      .deviceInformation-wrap{


        .deviceContent-wrap{
          width: 700px;
          display: flex;
          justify-content: space-between;

          .deviceContent{
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            li{
              display: flex;
              align-items: center;
              margin-bottom: 10px;
            }

            .label{
              width: 100px;
              display: inline-block;
            }
            .value{
              width: 200px;
              display: inline-block;
              word-wrap: break-word;
            }
          }
        }
      }

      .sysmonitor-wrap{
        .monitor-chart{
          display: flex;
          justify-content: space-around;
          margin-top: 40px;
          .diskPan{
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border-width: 1px;
            border-style: solid;
            border-color: #fff;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;

          }
        }
      }
    }

  }

  .home-card-wrap{
     width: 100%;
    display: flex;
    justify-content: space-between;

    .resource-list-wrap{
      display: flex;
      flex-wrap: wrap;
      .resource-list-item{
        width: 33.33%;
        margin-bottom: 26px;
        .name{
          font-weight: 700;
          margin-bottom: 10px;
        }
        .count-wrap{
          display: flex;

          .countInfo{
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>

